define(['./ContainerView'], function(ContainerView) {

  return ContainerView.extend({
    // 对应到css
    type: 'ColumnLayoutView',
    defaults: {
      itemswidth: [
        "50%", "50%"
      ]
    },


    CellJDoms:[],
    render: function() {
      this.$el.empty();
      this.$el.css({"background":this.options.backgroundcolor});
      this.options.itemswidth = this.options.itemswidth || this.defaults.itemswidth;
      var ColumnTable = $("<div class='col-layout-wraper'></div>");
      this.CellJDoms = [];
      this.options.paddings=this.options.paddings||[];
      var columnCount =  this.options.itemswidth.length;
      for (var i = 0, j = columnCount; i < j; i++) {
        var w = this.options.itemswidth[i] || "auto";
        var padding =this.options.paddings[i]|| "";
        padding = padding==""?"":";padding:"+padding+"";
        w = isNaN(w) ? w : w + "px";
        //var cell = $("<div class='col-layout-cell' style='width:" + w + padding +"'></div>");
        var child;
        if (i >= this.components.length) {
          var child_cfg =   {
              type:"ContainerView",
              style:"height:100%;"
            };
          child = this.createComponent(child_cfg);
          this.components.push(child);
        }
        child = this.components[i];
        var processedChild = this.designerWraperComponent(child.render()).el;
        processedChild.style.padding = padding;

        child.verticalAlignWrapper = processedChild;
        child.setContentVerticalAlign && child.setContentVerticalAlign();

        //判断分栏下一级是否ContainerView
        if(processedChild.classList.length > 0 && processedChild.classList[0] == "ContainerView") {
          //如果是ContainerView 新增一个div作为单元格
          var layoutCell = $("<div class='col-layout-cell'></div>");
          layoutCell.css({width:w});
          layoutCell.append(processedChild);
          ColumnTable.append(layoutCell);
        } else {
          //如果不是ContainerView 按照旧结构继续进行。。。
          processedChild.classList.add("col-layout-cell");
          processedChild.style.width = w;
          ColumnTable.append(processedChild);
        }

      }

      this.$el.append(ColumnTable);

      if(this.isInDesign()){
        this.setElFixed();
      }
      return this;
    },

    setElFixed:function(){
      var _this = this;
      var fixedPosition = this.options.fixedPosition || "none";
      if(fixedPosition == "top" || fixedPosition == "bottom"){
        var cssStyle = {"position":"fixed","zIndex":"100"};
        cssStyle[fixedPosition] = "0";
        this.$el.css(cssStyle);
        var timescount = 0;
        var timeintervalid = null;
        timeintervalid = window.setInterval(function(){
          var h = _this.el.offsetHeight;
          timescount += 1;
          if(timescount >= 5 || h > 0){
            var pageStyle = {};
            var pageStyleKey = fixedPosition == "top" ? "padding-top" : "padding-bottom";
            pageStyle[pageStyleKey] = h + "px";
            var curPageView = $(".PageView");
            curPageView.css(pageStyle);
            if(curPageView.length == 0){
              var doc = $(window.frames["editor-device"].document);
              if(doc){
                curPageView = doc.find(".PageView");
                var resetKey = fixedPosition != "top" ? "padding-top" : "padding-bottom";
                pageStyle[resetKey] = 0;
                curPageView.css(pageStyle);
              }
            }
            window.clearInterval(timeintervalid);
          }
        },100);
      }
    },
    onRender:function(){
      if(!this.isInDesign()){
        this.setElFixed();
      }
    }

  });
});
